<template>
  <div>
    <Row>
    <Card>
      <div class="top-tool-bar">
        <Select v-model="model1" style="width:150px" placeholder="设备类型" :label-in-value="true">
          <Option v-for="item in cityList" :value="item.id" :key="item.id" :label="item.name">{{ item.name }}</Option>
        </Select>

        <DatePicker type="daterange" :options="Dateoptions" placement="bottom-start" placeholder="生产日期"
                    style="width: 200px"></DatePicker>
        <Input v-model="value" placeholder="请输入设备名称或编号" style="width: 200px"></Input>
        <Button type="primary" icon="ios-search" >搜索</Button>

      </div>
      <div class="distance">
        <Button type="success" @click.prevent.stop="showAdd()">新增</Button>

        <Button type="info" >编辑</Button>

        <Button type="error" >删除</Button>

        <Button  @click.prevent.stop="showAdd()">查看</Button>

      </div>
      <Row>
        <Col >
        <Table border :columns="columns1" :data="data1"></Table>
        </Col>
      </Row>
      <Page :total="100" show-elevator show-sizer @on-change="changePage"></Page>

      <Modal
              v-model="showAddOrderModal"
              title="新建订单"
              ok-text="保存"
              width="650"
              @on-cancel="cancelAddOrderModal">
        <Form :model="detail" label-position="right" :label-width="80"  >
          <Row>
            <Col span="12">
            <Form-item label="机构名称">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="上级机构">
              <Select v-model="model1" >
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="所属公司">
              <Select v-model="model1" >
                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="机构编码">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="传真">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="电话">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
          </Row>
          <Row>
            <Col span="12">
            <Form-item label="Email">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
            <Col span="12">
            <Form-item label="地址">
              <Input v-model="detail.input1"></Input>
            </Form-item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </Card>
    </Row>

  </div>
</template>
<style scoped>

</style>
<script type="text/ecmascript-6">

  export default {
    beforeMount () {

    },
    mounted() {

    },
    data () {
      return {
        detail:{
          input1:'',
          input2:'',
        },
        showAddOrderModal:false,
        columns1: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '设备编号',
            key: 'name1'
          },
          {
            title: '类型',
            key: 'name2'
          },
          {
            title: '名称1',
            key: 'name3'
          },
          {
            title: '名称2',
            key: 'name4'
          },
          {
            title: '状态',
            key: 'name5'
          },
          {
            title: '生产厂家',
            key: 'name6'
          },
          {
            title: '生产厂家电话',
            key: 'name7'
          },
          {
            title: '生产时间',
            key: 'name8'
          },
          {
            title: '有效期',
            key: 'name9'
          }
        ],
        data1: [
          {
            name1: '1123232',
            name2: '全启式安全阀',
            name3: '可燃气体探头',
            name4: '2#可燃气体探头',
            name5: '使用中',
            name6: '西安博康电子有限公司',
            name7: '13456564545',
            name8: '2014-02-01',
            name9: '2021-02-02',
          },
          {
            name1: '1123232',
            name2: '全启式安全阀',
            name3: '可燃气体探头',
            name4: '2#可燃气体探头',
            name5: '使用中',
            name6: '西安博康电子有限公司',
            name7: '13456564545',
            name8: '2014-02-01',
            name9: '2021-02-02',
          },
          {
            name1: '1123232',
            name2: '全启式安全阀',
            name3: '可燃气体探头',
            name4: '2#可燃气体探头',
            name5: '使用中',
            name6: '西安博康电子有限公司',
            name7: '13456564545',
            name8: '2014-02-01',
            name9: '2021-02-02',
          }

        ],
        value2: '',
        loading:false,
        list: {},
        cityList: [
          {
            value: 'all',
            label: '全部'
          },
          {
            value: 'start',
            label: '启用'
          },
          {
            value: 'forbidden',
            label: '停用'
          }
        ],
        model1: '',
        Dateoptions: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        },
      }
    },
    methods: {
      showAdd(){
        this.showAddOrderModal = true;
      },
      cancelAddOrderModal(){
        this.showAddOrderModal = false;
      },
      changePage(num){
        console.log(num);
      }
    }

  };
</script>
